<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>酒店预定管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <script>
        var value = sessionStorage.getItem("admin");
        if (value ===null){
            alert("请先登录!")
            window.location.href = "../login/login.html"
        }
    </script>
    <div class="layui-header" style="background-color: #c0c4cc">
        <div class="layui-logo layui-hide-xs layui-bg-black">酒店预定管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    <span id="head_user"></span>
                    <script>
                        var value = sessionStorage.getItem("name");
                        document.getElementById("head_user").textContent=value
                    </script>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll" style="background-color:sandybrown;">
            <ul class="layui-nav layui-nav-tree" lay-filter="test" style="background-color:sandybrown">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">个人信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="person_information.html">个人信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">酒店订单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="OrderList.html">预定房间订单</a></dd>
                        <dd><a href="checkinList.html">已入住房间订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">客房信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="guestroom_list.html">客房列表</a></dd>
                        <dd><a href="roomType.html">房间类型</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">酒店活动管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="activity.html">活动管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">会员管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="member_management.html">会员列表</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                    <a href="index.html">首页</a>
                    <a><cite>酒店订单管理</cite></a>
                    <a><cite>预定房间订单</cite></a>
                </span>
            </blockquote>
            <div class="layui-card-body">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend>预定房间订单</legend>
                </fieldset>
                <table id="orderTable" class="layui-table"></table>
            </div>
            <script type="text/html" id="barDemo">
                <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="checkIn" id="status_check">入住</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>
            </script>
        </div>
    </div>
    <div class="layui-footer">
        酒店预定管理系统
    </div>
</div>

<script src="/layui/layui.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    layui.use(['element', 'layer', 'util', 'table'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var table = layui.table;

        // 渲染表格
        table.render({
            elem: '#orderTable',
            url: '/roomReserve/selectAll',
            method: 'get',
            // 可根据需要添加查询条件，例如：
            // where: {status: 0, hasOrderTime: true},
            cols: [[
                {field: 'reservationId', title: '预定编号', width: 100},
                {field: 'status', title: '状态', width: 100},
                {field: 'orderTime', title: '下单时间', width: 150},
                {field: 'days', title: '预订天数', width: 100},
                {field: 'checkInTime', title: '入住时间', width: 150},
                {field: 'checkInName', title: '入住人姓名', width: 100},
                {field: 'checkInPhone', title: '联系电话', width: 150},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]],
            page: true,
            response: {
                statusCode: 200
            },
            parseData: function(res){
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.total,
                    "data": res.data
                };
            },
            done: function(res, curr, count) {
                console.log(res);
            }

        });
        $("#status_check").click(function(){
            alert("211")
            $.ajax({
                url: '/roomReserve/updateById',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify({
                    reservationId: data.reservationId,
                    status: 1
                }),
                success: function(response) {
                    if (response.code === 200) {
                        layer.msg('入住办理成功', {icon: 1});
                        // 调用另一个后端接口将记录添加到已入住房间订单
                        $.ajax({
                            url: '/roomReserve/addToCheckinList',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function(response) {
                                if (response.code === 200) {
                                    layer.msg('已成功添加到已入住房间订单', {icon: 1});
                                    document.getElementById("status_check").textContent = "已入住"
                                    // 刷新表格
                                    table.reload('orderTable');
                                } else {
                                    layer.msg('添加到已入住房间订单失败: ' + response.msg, {icon: 2});
                                }
                            },
                            error: function() {
                                layer.msg('添加到已入住房间订单请求失败，请稍后再试', {icon: 2});
                            }
                        });
                    } else {
                        layer.msg('入住办理失败: ' + response.msg, {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('请求失败，请稍后再试', {icon: 2});
                }
            });
        })

        // 监听工具条按钮点击事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;

            if(layEvent === 'checkIn'){
                layer.confirm('确定要办理入住吗？', {icon: 3, title: '提示'}, function(index) {
                    // layer.close(index);
                    // 调用后端接口更新订单状态
                    $.ajax({
                        url: '/roomReserve/updateById',
                        type: 'PUT',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            reservationId: data.reservationId,
                            status: 1
                        }),
                        success: function(response) {
                            if (response.code === 200) {
                                layer.msg('入住办理成功', {icon: 1});
                                // 调用另一个后端接口将记录添加到已入住房间订单
                                $.ajax({
                                    url: '/roomReserve/addToCheckinList',
                                    type: 'POST',
                                    contentType: 'application/json',
                                    data: JSON.stringify(data),
                                    success: function(response) {
                                        if (response.code === 200) {
                                            layer.msg('已成功添加到已入住房间订单', {icon: 1});
                                            document.getElementById("status_check").textContent = "已入住"
                                            // 刷新表格
                                            table.reload('orderTable');
                                        } else {
                                            layer.msg('添加到已入住房间订单失败: ' + response.msg, {icon: 2});
                                        }
                                    },
                                    error: function() {
                                        layer.msg('添加到已入住房间订单请求失败，请稍后再试', {icon: 2});
                                    }
                                });
                            } else {
                                layer.msg('入住办理失败: ' + response.msg, {icon: 2});
                            }
                        },
                        error: function() {
                            layer.msg('请求失败，请稍后再试', {icon: 2});
                        }
                    });
                });
            } else if (layEvent === 'delete') {
                layer.confirm('确定要删除该订单吗？', {icon: 3, title: '提示'}, function(index) {
                    layer.close(index);
                    $.ajax({
                        url: '/roomReserve/deleteById',
                        type: 'DELETE',
                        data: {
                            reservationId: data.reservationId
                        },
                        success: function(response) {
                            if (response.code === 200) {
                                layer.msg('订单删除成功', {icon: 1});
                                table.reload('orderTable');
                            } else {
                                layer.msg('订单删除失败: ' + response.msg, {icon: 2});
                            }
                        },
                        error: function() {
                            layer.msg('请求失败，请稍后再试', {icon: 2});
                        }
                    });
                });
            }
        });

    });
</script>
</body>
</html>